<template>
<div class="home-content">
  <div class="content">
    <div class="article-list">

      <div class="article-digest" v-for="article in articleList" :key="article.id">
        <div class="article-meta">
          <span> <i class="fa fa-calendar"></i> {{article.createDate}}</span>
          <span>  |  </span>
          <span>{{article.category}}</span>
        </div>

        <h1 class="article-title">{{article.title}}</h1>

        <div class="article-content">
          <p>
            {{article.content}}
          </p>
        </div>

        <a class="article-read-more">READ MORE >>></a>
      </div>

    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'HomeContent',
  data () {
    return {
      articleList: [
        {
          id: 10001,
          title: '[置顶]一份值得收藏的知识清单',
          content: '随着学习的深入，越来越发现知识体系的重要性。平时积累的零碎知识，如果不做关联，在一些时候（比如面试）会不堪一击。\n' +
        '\n' +
        '所以，特别整理和分享自己这份开袋即食的知识清单，方便自己看，也希望对大家有帮助哈~',
          category: 'Java',
          createDate: '2019-03-04'
        },
        {
          id: 10002,
          title: '[置顶]一份值得收藏的知识清单2',
          content: '随着学习的深入，越来越发现知识体系的重要性。平时积累的零碎知识，如果不做关联，在一些时候（比如面试）会不堪一击。\n' +
          '\n' +
          '所以，特别整理和分享自己这份开袋即食的知识清单，方便自己看，也希望对大家有帮助哈~',
          category: 'Java',
          createDate: '2019-03-04'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.home-content
  display flex
  margin: 0 auto
  .content
    display flex
    max-width 1024px
    .article-digest
      padding: 60px 60px 40px;
      margin-bottom  30px;
      background #fff
      border-radius: 10px;
      .article-meta
        font-size 16px
        color #616161
      .article-title
        font-size: 26px;
        line-height: 42px;
        margin: 20px 0 25px;
      .article-content
        font-size: 16px;
        font-family: sans-serif
        line-height: 2;
        letter-spacing: 0.3px;
        word-break: break-word;
        p
          margin: 12px 0;
      .article-read-more
        display: inline-block;
        margin-top: 15px;
        margin-left: 0;
        color: #9E9E9E;
        font-weight: 600;
        font-size: 18px;
        font-style: italic;
        transition: all .1s linear;
</style>
